<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			ref="hyTableRef"
			:buttonConfig="{
				span: 4,
				offset: 1,
			}"
		>
			<template #dateSlot="{ row }">
				<span>{{ row.developBeginDate }} 至 {{ row.developEndDate }}</span>
			</template>
			<template #domainSlot="{ row }">
				<dict-tag :options="culture_type" :value="row.domain"></dict-tag>
			</template>
			<template #tableHeader>
				<el-button @click="handleOperate('add')" type="primary" icon="Plus">新建</el-button>
				<el-button @click="handleOperate('export')" icon="download">导出</el-button>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="180">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-around">
							<el-button class="mr-5" text type="primary" icon="View" @click="handleOperate('view', row)">查看</el-button>
							<el-dropdown style="color: var(--el-color-primary)">
								<span class="el-dropdown-link">
									更多
									<el-icon class="el-icon--right">
										<arrow-down color="var(--el-color-primary)" />
									</el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item style="color: #52c41a" :icon="Edit" @click="handleOperate('edit', row)">编辑</el-dropdown-item>
										<el-dropdown-item style="color: #f74e56" :icon="Delete" @click="handleOperate('delete', row)">删除</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts" setup>
import { useDict } from '/@/hooks/dict';
import { ArrowDown, Edit, Delete } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import other from '/@/utils/other';
import HyTable from '/@/components/HyTable/components/TableLayout/default.vue';
import { sensitiveApplicationPageApi, sensitiveApplicationDelApi } from '/@/api/sensitiveData/informationEntry';
import params from '/@/utils/params';
//表头数据
const tableColumns = computed(() => {
	return [
		{ prop: 'appName', label: ' 应用名称', width: 150 },
		{ prop: 'responsibleDept', label: '责任部门' },
		{ prop: 'budgetUnit', label: '预算部门' },
		{ prop: 'leadDept', label: '应用牵头部门' },
		{ prop: 'principalName', label: '应用负责人', width: 100 },
		{ prop: 'budgetYear', label: '应用预算年度', width: 120 },
		{ prop: 'domain', label: '应用领域', slot: 'domainSlot' },
		{ prop: 'developBeginDate', label: '应用建设起止时间', slot: 'dateSlot' },
		{ prop: 'createTime', label: '提交时间' },
	];
});

//表格数据
const tableConfig = computed(() => {
	return {
		request: sensitiveApplicationPageApi,
	};
});
//下拉搜索字典
const { culture_type } = useDict('culture_type');
// 配置搜索
const searchFields = computed(() => {
	return {
		appName: {
			type: 'input',
			label: '应用名称',
		},
		domain: {
			type: 'select',
			label: '应用领域',
			options: culture_type.value,
		},
		timeArr: {
			type: 'date',
			span: 10,
			picker: 'daterange',
			label: '应用建设起止时间',
			showFormat: 'YYYY-MM-DD ',
			valueFormat: 'YYYY-MM-DD',
		},
	};
});
//配置搜索
const searchConfig = computed(() => {
	return {
		labelWidth: '150px',
		span: 6,
		offset: 0,
		type: 'search',
		title: '信息录入',
		show: true,
	};
});
//默认
const searchDefault = ref({});
const hyTableRef = ref();
const router = useRouter();

const handleOperate = (operateType: string, row?: any) => {
	switch (operateType) {
		// sensitiveId 信息id 用于查看详情 修改 删除
		//新增
		case 'add':
			router.push({
				path: '/sensitiveData/addInfoApp',
				query: {
					operateType: 'add',
					pageFrom: 'index',
				},
			});
			break;
		//修改
		case 'edit':
			router.push({
				path: '/sensitiveData/addInfoApp',
				query: {
					operateType,
					sensitiveId: row.sensitiveId,
					pageFrom: 'index',
				},
			});
			break;
		//详情
		case 'view':
			router.push({
				path: '/sensitiveData/detail',
				query: {
					operateType,
					sensitiveId: row.sensitiveId,
					pageFrom: 'index',
				},
			});
			break;
		//删除
		case 'delete':
			ElMessageBox.confirm('是否确定删除?', '操作确认', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				hyTableRef.value.loading = true;
				sensitiveApplicationDelApi({ sensitiveId: row.sensitiveId }).then(() => {
					hyTableRef.value.getTableData();
				});
			});
			break;
		//导出
		case 'export':
			let params = hyTableRef.value.getSearchData();
			if (params.timeArr) {
				params['developBeginDate'] = params.timeArr[0];
				params['developEndDate'] = params.timeArr[1];
			}
			delete params.timeArr;
			other.downBlobFile('/manage/sensitiveApplication/export', { ...params }, `信息录入列表.xlsx`);
			break;
	}
};
</script>

<style scoped lang="scss"></style>
